<template>
  <div class="page-main">
    
    <div class="page-menu">
      <template v-for="item in menuList" :key="item.key">
        <p :class="['menu-item',menuOPT.checked===item.key?'menu-checked':'']" @click="changePage(item)">{{item.label}}</p>
      </template>
    </div>

    <div class="page-body">
      <keep-alive>
        <component :is="checkedComponent" :key="menuOPT.checked" :customerList="customerList" :tagsList="tagsList"></component>
      </keep-alive>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'uploadContent',
  }
</script>
<script setup>
import { ref,reactive,defineAsyncComponent, computed,watch} from 'vue'
import {useRouter } from "vue-router";
import { getTopicTagsList,getTestCustomerList } from "@/api/operation";
const imageContent = defineAsyncComponent(() =>import('./upload/imageContent.vue'))
const videoContent = defineAsyncComponent(() =>import('./upload/videoContent.vue'))
const videoBatch = defineAsyncComponent(() =>import('./upload/videoBatch.vue'))

const router = useRouter();

const query = router.currentRoute.value.query;
const menuOPT = reactive({
  checked: query.view || "video",
})

watch(()=>router.currentRoute.value.query,(n,o)=>{
  menuOPT.checked = n.view || "video";
})

const menuList = [
    {key:"video",label:"添加视频"},
    {key:"image",label:"添加图文"},
    {key:"videos",label:"视频批量"},
  ]

let checkedComponent = computed(()=>{
  return {
    "image":imageContent,
    "video":videoContent,
    "videos":videoBatch,
  }[menuOPT.checked];
})

function changePage(item){
  const path = router.currentRoute.value.path;
  const statistics = router.currentRoute.value.query.statistics
  router.push(`${path}?view=${item.key}`)
}

const tagsList = ref([]);
getTopicTagsList({page:1,pageSize: 1000,status: 1}).then(res=>{
  if(res.code===0){
    let mlist = [];
    for(let prop of res.data.items || []){
      mlist.push({
        id: prop.id,
        name: prop.name,
      })
    }
    tagsList.value=mlist;
  }
})
const customerList = ref([]);
getTestCustomerList().then(res=>{
  if(res.code===0){
    let mlist = [];
    for(let prop of res.data || []){
      mlist.push({
        id: prop.customerId,
        name: prop.nickname,
        phone: prop.phone,
      })
    }
    customerList.value=mlist;
  }
})

</script>

<style scoped lang="scss">
@import "@/styles/tablePage.scss";
.page-body{
  // background-color: #ffffff;
  border-radius: 8px;
  // padding: 8px;
  margin-top: 8px;
}
</style>